<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jstl/core_rt'%>
<%@ page
	import="org.springframework.security.core.AuthenticationException"%>
<%@ page
	import="org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter"%>
<%@ page
	import="org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter"%>
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="cs" />
<meta name="robots" content="all,follow" />

<title>ProjectBox</title>
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/uploadPopup.css' />" />

<link type="text/css" rel="stylesheet"
	href="<c:url value='/css/reset.css' />" />
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="<c:url value='/css/main.css' />" />
<link rel="stylesheet" media="print" type="text/css"
	href="<c:url value='/css/print.css' />" />
<link rel="stylesheet" media="aural" type="text/css"
	href="<c:url value='/css/aural.css' />" />
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="<c:url value='/css/demo.css' />" />
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="<c:url value='/css/button.css' />" />
<link type="text/css" rel="stylesheet"
	href="<c:url value='/css/sliderstyle.css' />" />
<link type="text/css" rel="stylesheet"
	href="<c:url value='/css/rcarousel.css' />" />



<link href="http://fonts.googleapis.com/css?family=Anton|Ubuntu"
	rel="stylesheet" type="text/css" />


<link rel="stylesheet" media="screen,projection" type="text/css"
	href="<c:url value='/css/separateslider.css' />" />
<!--  <script type="text/javascript" src="http://ws.mss.icics.ubc.ca/~pandya/js/separateslider.js"></script>  -->


<script type="text/javascript"
	src="<c:url value='/js/jquery-1.7.1.js' />">
	
</script>
<script type="text/javascript"
	src="<c:url value='/js/jquery.ui.core.js' />"></script>
<script type="text/javascript"
	src="<c:url value='/js/jquery.ui.widget.js' />"></script>
<script type="text/javascript"
	src="<c:url value='/js/jquery.ui.rcarousel.js' />"></script>
<script type="text/javascript"
	src="<c:url value='/js/separateslider.js' />"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"
	src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
	$(document).ready(function() {
		$("#regForm").validate({
			onsubmit : false,
			rules : {
				pass :  {
					required : true,
					maxlength: 40,
					minlength: 6
				},
				pass_again : {
					equalTo : "#pass"
				},
				email : {
					required : true,
					email : true,
					maxlength: 60
				},
				fname : {
					required : true,
					maxlength: 40
				},
				lname : {
					required : true,
					maxlength: 40
				}
			},
		 messages: {

		        pass: {
		            required: "Enter a password",
		            minlength: jQuery.format("Minimum password length is {0} characters"),
		            maxlength: jQuery.format("Maximum password length is {0} characters"),

		        },
		        email: {
		        	maxlength: jQuery.format("Maximum e-mail length is {0} characters"),
		        },
		        fname: {
		        	maxlength: jQuery.format("Sorry First Name is too long!"),
		        },
		        lname: {
		        	maxlength: jQuery.format("Sorry Last Name is too long!"),
		        },
		 }
	});
	});
</script>
<style>
br {
	clear: both;
}

input.submit {
	float: none;
}

input.error {
	border: 1px solid red;
	width: auto;
}

label {
	width: 8em;
	float: left;
}

label.error {
	background:
		url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif')
		no-repeat;
	float: none;
	color: red;
	padding-left: .em;
	vertical-align: top;
}

label.valid {
	background:
		url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif')
		no-repeat;
	display: block;
	width: 16x;
	height: 16px;
}
</style>
</head>


<body id="www-url-cz">
	<!-- Main -->
	<div id="main" class="box">

		<!-- Header -->
		<div id="header">
			<!-- Logotyp -->
			<img alt="" src="<c:url value='/design/logo.png'/>" class="logo" />
			<hr class="noscreen" />
			<!-- Quick links -->
			<div class="noscreen noprint">
				<p>
					<em>Quick links: <a h ref="#content">content</a>, <a
						href="#tabs">navigation</a>
					</em>
				</p>
				<hr />
			</div>

			<div align="right" style="padding-right: 10px">
				<form id="login" name="f"
					action="<c:url value='j_spring_security_check' />" method="post">
					<table style="border: hidden">
						<tr>
							<td style="border-bottom: medium hidden; border-right: medium hidden;padding-top:5px"><p>&nbsp;</p>
								<p>Email: <input style="color: rgb(0, 0, 0);" name="j_username" type="text">
								</p>
							</td>
							<td style="border-right: medium hidden; border-bottom: medium hidden; padding-top:5px; padding-left: 8px;"><p>&nbsp;</p>
								<p> Password: <input style="color: rgb(0, 0, 0);" name="j_password" type="password">
								</p>
							</td>
							<td
								style="vertical-align: bottom; border-bottom: hidden; padding-left: 8px"><input
								type="submit" class="loginbutton" value="Sign In" />
							</td>
						</tr>
						<c:choose>
						<c:when test="${error}">
							<tr>
								<td style="border-right: hidden; color:white" colspan="3">
									<b style="color: red">Your login attempt was not successful, Please try again.</b>
								</td>
							</tr>
						</c:when>
						</c:choose>
					</table>
				</form>
			</div>
		</div>
		<!-- /header -->

		<!-- Main menu (tabs) -->
		<div id="tabs" class="noprint">
			<h3 class="noscreen">Navigation</h3>
			<hr class="noscreen" />
		</div>
		<!-- /tabs -->

		<!-- Page (2 columns) -->
		<div id="page" class="box">
			<div id="page-in" class="box">
				<div id="boxContainer">

					<div id="box1"
						style="float: left; padding-left: 15px; padding-bottom: 5px;">
						<div id="carousel">

							<div id="slide01" class="slide">
								<img src="<c:url value='/images/html_slides/anycontent.png'/>"
									alt="any content" />
								<div class="text">
									<h1>Share Files</h1>
									<p>From docs to images</p>
								</div>
							</div>

							<div id="slide02" class="slide">
								<img src="<c:url value='/images/html_slides/browse.png'/>"
									alt="Share Project" />
								<div class="text">
									<h1>
										Contribute<br />
									</h1>
									<p>Participate in many projects</p>
								</div>
							</div>

							<div id="slide03" class="slide">
								<img src="<c:url value='/images/html_slides/ckeditor.png'/>"
									alt="CKEditor" />
								<div class="text">
									<h1>
										CKEditor<br />
									</h1>
									<p>For rules management</p>
								</div>
							</div>

							<div id="slide04" class="slide">
								<img src="<c:url value='/images/html_slides/folder1.png'/>"
									alt="Folder" />
								<div class="text">
									<h1>
										Folder Support<br />
									</h1>
									<p>Organize your files</p>
								</div>
							</div>

							<div id="slide06" class="slide">
								<img
									src="<c:url value='/images/html_slides/mobileversion1.png'/>"
									alt="Mobile support" />
								<div class="text">
									<h1>
										iPhone App<br />
									</h1>
									<p>ProjectBox on the move</p>
								</div>
							</div>
						</div>

						<div id="pages"></div>
					</div>

					<div id="div-regForm" style="float: right">
						<div class="form-title" align="left" style="padding-bottom: 10px;">
							<h3 align="left">Register</h3>
						</div>

						<!---- New Registration Form  -->
						<form id="regForm" action="<c:url value='/register' /> " method="post">
							<table style="border: hidden">
								<tbody>
									<tr>
										<td
											style="padding-top: 8px; border-right: hidden; border-bottom: hidden; padding-left: 5px"><label
											for="fname">First Name:</label></td>
										<td style="border-bottom: hidden; padding-left: 10px"><input
											style="color: #000000" name="fname" id="fname" type="text"
											class="required" /></td>
									</tr>

									<tr>
										<td
											style="padding-top: 8px; border-right: hidden; border-bottom: hidden; padding-left: 5px"><label
											for="lname">Last Name:</label></td>

										<td style="border-bottom: hidden; padding-left: 10px"><div
												class="input-container">
												<input style="color: #000000" name="lname" id="lname"
													type="text" class="required" />
											</div></td>
									</tr>
									<tr>
										<td
											style="padding-top: 8px; border-right: hidden; border-bottom: hidden; padding-left: 5px"><label
											for="email">Your Email:</label></td>
										<td style="border-bottom: hidden; padding-left: 10px"><div
												class="input-container">
												<input style="color: #000000" name="email" id="email"
													type="text" class="required" />
											</div></td>
									</tr>
									<tr>
										<td
											style="padding-top: 8px; border-bottom: hidden; border-right: hidden; padding-left: 5px">
											<label for="pass">Password:</label>
										</td>
										<td style="border-bottom: hidden; padding-left: 10px"><div
												class="input-container">
												<input style="color: #000000" name="pass" id="pass"
													type="password" autocomplete="off" />
											</div></td>
									</tr>
									<tr>
										<td
											style="padding-top: 8px; border-bottom: hidden; border-right: hidden; padding-left: 5px">
											<label for="pass_again">Re Password:</label>
										</td>
										<td style="border-bottom: hidden; padding-left: 10px"><div
												class="input-container">
												<input style="color: #000000" name="pass_again"
													id="pass_again" type="password" autocomplete="off" />
											</div></td>
									</tr>
									<tr>
									</tr>
									<tr>
										<td
											style="border-top: hidden; border-right: hidden; margin-top: '10px'">&nbsp;</td>

										<td
											style="padding-top: 8px; padding-left: 10px; border-bottom: hidden"><input
											type="submit" class="obutton" id="signUp" value="Sign Up" /></td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
					<!-- End of div-regForm -->

				</div>
				<!-- End of boxContainer -->
			</div>
			<!-- /page -in -->

		</div>
		<!-- /page -in -->
		<div id="footer">
			<p id="copyright">
				&copy; 2014 <a href="mailto:mss.projectbox@gmail.com">ProjectBox Team</a>
			</p>
		</div>
		<!-- /footer -->
	</div>
	<!-- End of page -->
	</div>
	<!-- /main -->	
	
	<script>
		$("#signUp").click(function(e) {
			onsubmit: false;	
			e.preventDefault();
			e.preventDefault();
			if ($("#regForm").valid()) {
				$.ajax({
					type : "POST",
					traditional : true,
					url : "/ProjectBox/register/checkEmail",
					async : false,
					data : {
						email : $("#email").val()
					},
					dataType : "json",
					success : function(data) {
						//	alert("data");
						if (data.valid == true) {
							$("#regForm").submit();
						//	alert("Successful");
						} else {
							alert("Sorry, your e-mail address is already in use. Please try with a different e-mail");
						}
					},
					error : function() {
						alert("error");
					}
				});
				return true;
			}
			return false;
		});
	</script>

</body>
</html>